<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
</head>
<body>
<div class="text-top">
    <h1>京津翼灾后物资救援系统</h1>
</div>
<div id="FindPaw">

    <div class="main">
        <div class="from-top">
            <p style="color: blue;font-size:22px;font-family: 'Adobe 黑体 Std R';font-weight: bold">找回密码</p>
            <!--<i class="el-icon-star-off"></i>-->
        </div>
        <div class="from">
            <el-input placeholder="请输入内容" v-model="input1">
                <template slot="prepend">您的手机号</template>
            </el-input>
        </div>

    </div>

</div>
</body>
<style>
    .from-top {
        text-align: left;
    }


    body, html {
        width: 100%;
        height: 100%;
    }

    .text-top {
        /*border-bottom-style: solid;*/
        /*border-bottom-color: blue;*/
        /*background-color: aqua;*/
    }

    #FindPaw {

        height: 50%;
        width: 100%;
        background-image: url("./map/bg2.jpg");
        /*background-color: #8fff3a;*/
    }

    .main {
        height: 50%;
        width: 40%;
        /*background-color: red;*/

        position: center;


    }
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#FindPaw',
        data: function () {
            return {
                input1: ''
            }

        }


    })
</script>

</html>